<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <!-- 烟花烟花烟花烟花烟花 -->
    <script>
      var canvas = document.createElement("canvas");
      document.body.appendChild(canvas);
      var context = canvas.getContext("2d");
      //规定画布大小
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      //画布颜色为黑色
      function clearCanvas() {
        context.fillStyle = "#000000";
        context.fillRect(0, 0, canvas.width, canvas.height);
      }
      clearCanvas();

      //创建烟花
      var particles = []; //烟花
      function Fireworks(sx, sy) {
        var count = 100; //烟花的个数
        for (var i = 0; i < count; i++) {
          var p = {}; //烟花的对象
          var angle = Math.floor(Math.random() * 360); //角度
          p.radians = (angle * Math.PI) / 180; //弧度
          p.x = sx;
          p.y = sy;
          p.speed = Math.random() * 10; //速度
          p.radius = p.speed * 2; //半径
          p.size = Math.ceil(Math.random() * 5); //大小
          p.hue = Math.floor(Math.random() * 100) + 150; //颜色
          p.brightness = Math.floor(Math.random() * 31) + 50; //亮度
          p.alpha = (Math.floor(Math.random() * 61) + 40) / 100; //透明度
          particles.push(p);
        }
      }

      //实现烟花效果
      function diawFireworks() {
        clearCanvas();
        for (var i = 0; i < particles.length; i++) {
          var p = particles[i];
          var vx = Math.cos(p.radians) * p.radius; //小球水平方向落下时的距离
          var vy = Math.sin(p.radians) * p.radius + 0.4; //小球落下时的距离

          p.x += vx;
          p.y += vy;
          p.radius *= 1 - p.speed / 100; //半径
          p.alpha -= 0.005; //透明度

          if (p.alpha <= 0) {
            particles.splice(i, 1);
            continue;
          }
          context.beginPath();
          //中心坐标 半径 角度
          context.arc(p.x, p.y, p.size, 0, Math.PI * 2);
          //颜色 饱和度 亮度 透明度
          context.fillStyle =
            "hsla(" + p.hue + ",100%," + p.brightness + "%," + p.alpha + ")";
          context.fill();
        }
      }

      //实现烟花拖尾的效果
      function tick() {
        context.globalCompositeOperation = "destination-out";
        context.fillStyle = "rgba(0,0,0," + 0.1 + ")";
        context.fillRect(0, 0, canvas.width, canvas.height);
        context.globalCompositeOperation = "lighter";
        diawFireworks(); //画烟花
        //浏览器下次重绘之前继续更新下一帧动画
        requestAnimationFrame(tick);
      }
      tick();

      //第二个
      //创建烟花
      var particles2 = []; //烟花
      function Fireworks2(sx, sy) {
        var count = 50; //烟花的个数
        for (var i = 0; i < count; i++) {
          var p = {}; //烟花的对象
          var angle = Math.floor(Math.random() * 360); //角度
          p.radians = (angle * Math.PI) / 180; //弧度
          p.x = sx;
          p.y = sy;
          p.speed = Math.random() * 5; //速度
          p.radius = p.speed * 1.3; //半径
          p.size = Math.ceil(Math.random() * 3); //大小
          p.hue = Math.floor(Math.random() * 100) + 200; //颜色
          p.brightness = Math.floor(Math.random() * 31) + 50; //亮度
          p.alpha = (Math.floor(Math.random() * 61) + 40) / 100; //透明度
          particles2.push(p);
        }
      }

      //实现烟花效果
      function diawFireworks2() {
        clearCanvas();
        for (var i = 0; i < particles2.length; i++) {
          var p = particles2[i];
          var vx = Math.cos(p.radians) * p.radius; //小球水平方向落下时的距离
          var vy = Math.sin(p.radians) * p.radius + 0.4; //小球落下时的距离

          p.x += vx;
          p.y += vy;
          p.radius *= 1 - p.speed / 100; //半径
          p.alpha -= 0.005; //透明度

          if (p.alpha <= 0) {
            particles2.splice(i, 1);
            continue;
          }
          context.beginPath();
          //中心坐标 半径 角度
          context.arc(p.x, p.y, p.size, 0, Math.PI * 2);
          //颜色 饱和度 亮度 透明度
          context.fillStyle =
            "hsla(" + p.hue + ",100%," + p.brightness + "%," + p.alpha + ")";
          context.fill();
        }
      }

      //实现烟花拖尾的效果
      function tick2() {
        context.globalCompositeOperation = "destination-out";
        context.fillStyle = "rgba(0,0,0," + 0.1 + ")";
        context.fillRect(0, 0, canvas.width, canvas.height);
        context.globalCompositeOperation = "lighter";
        diawFireworks2(); //画烟花
        //浏览器下次重绘之前继续更新下一帧动画
        requestAnimationFrame(tick2);
      }
      tick2();

      //循环定时器，烟花自动播放
      setInterval(function () {
        //当前窗口随机创建烟花
        Fireworks(Math.random() * canvas.width, Math.random() * canvas.height);
        Fireworks2(Math.random() * canvas.width, Math.random() * canvas.height);
      }, 1000);
    </script>
  </body>
</html>
